<!DOCTYPE html><html lang="en" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>【实战】基于Vue3搭建的管理系统 | ChenWeiHui's Blog</title><meta name="author" content="cwh"><meta name="copyright" content="cwh"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="引言目前，主流的前端开发框架为Vue3+TypeScript。本文将以Vue3+TypeScript为基础，构建一个简单的管理系统，旨在帮助了解Vue3与Vue2之间的区别，熟悉Vue3的开发方式。  项目地址：xxx  搭建 前提环境 安装了 包管理器npm 与 脚本运行环境 node.js  下面两种创建方式推荐脚手架cli cli方式创建项目 1vue create z-self_front">
<meta property="og:type" content="article">
<meta property="og:title" content="【实战】基于Vue3搭建的管理系统">
<meta property="og:url" content="https://gitee.com/CWH6/2023/10/08/%E3%80%90%E5%AE%9E%E6%88%98%E3%80%91%E5%9F%BA%E4%BA%8EVue3%E6%90%AD%E5%BB%BA%E7%9A%84%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/index.html">
<meta property="og:site_name" content="ChenWeiHui&#39;s Blog">
<meta property="og:description" content="引言目前，主流的前端开发框架为Vue3+TypeScript。本文将以Vue3+TypeScript为基础，构建一个简单的管理系统，旨在帮助了解Vue3与Vue2之间的区别，熟悉Vue3的开发方式。  项目地址：xxx  搭建 前提环境 安装了 包管理器npm 与 脚本运行环境 node.js  下面两种创建方式推荐脚手架cli cli方式创建项目 1vue create z-self_front">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/xhs.png">
<meta property="article:published_time" content="2023-10-08T15:33:11.000Z">
<meta property="article:modified_time" content="2023-10-10T15:38:35.723Z">
<meta property="article:author" content="cwh">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/xhs.png"><link rel="shortcut icon" href="/bk/img/jljy3.png"><link rel="canonical" href="https://gitee.com/CWH6/2023/10/08/%E3%80%90%E5%AE%9E%E6%88%98%E3%80%91%E5%9F%BA%E4%BA%8EVue3%E6%90%AD%E5%BB%BA%E7%9A%84%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/bk/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/bk/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: 'Copy successfully',
    error: 'Copy error',
    noSupport: 'The browser does not support'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: 'Just',
    min: 'minutes ago',
    hour: 'hours ago',
    day: 'days ago',
    month: 'months ago'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  }
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '【实战】基于Vue3搭建的管理系统',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-10-10 23:38:35'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 5.4.2"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/xhs.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/bk/archives/"><div class="headline">Articles</div><div class="length-num">66</div></a><a href="/bk/tags/"><div class="headline">Tags</div><div class="length-num">33</div></a><a href="/bk/categories/"><div class="headline">Categories</div><div class="length-num">8</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/bk/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/bk/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/bk/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/bk/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> List</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/bk/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/bk/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/bk/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/bk/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/bk/img/alone_blue_sky.jpg')"><nav id="nav"><span id="blog-info"><a href="/bk/" title="ChenWeiHui's Blog"><span class="site-name">ChenWeiHui's Blog</span></a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/bk/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/bk/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/bk/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/bk/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> List</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/bk/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/bk/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/bk/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/bk/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">【实战】基于Vue3搭建的管理系统</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">Created</span><time class="post-meta-date-created" datetime="2023-10-08T15:33:11.000Z" title="Created 2023-10-08 23:33:11">2023-10-08</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2023-10-10T15:38:35.723Z" title="Updated 2023-10-10 23:38:35">2023-10-10</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/bk/categories/%E5%89%8D%E7%AB%AF/">前端</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="【实战】基于Vue3搭建的管理系统"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">Post View:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h1><p>目前，主流的前端开发框架为<code>Vue3+TypeScript</code>。本文将以<code>Vue3+TypeScript</code>为基础，构建一个简单的管理系统，旨在帮助了解Vue3与Vue2之间的区别，熟悉Vue3的开发方式。</p>
<blockquote>
<p>项目地址：xxx</p>
</blockquote>
<h1 id="搭建"><a href="#搭建" class="headerlink" title="搭建"></a>搭建</h1><blockquote>
<p><strong>前提环境</strong></p>
<p>安装了 包管理器<code>npm</code> 与 脚本运行环境 <code>node.js</code></p>
</blockquote>
<p>下面两种创建方式推荐<code>脚手架cli</code></p>
<h2 id="cli方式"><a href="#cli方式" class="headerlink" title="cli方式"></a>cli方式</h2><p><strong>创建项目</strong></p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue create z-self_front</span><br></pre></td></tr></table></figure>

<p><strong>选择手动创建 <code>Manually select features</code>, 回车—&gt; 确认 ， 空格—&gt; 选择上</strong></p>
<p><img src="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/image-20231010225338292.png"></p>
<p><strong>选择依赖，按下回车</strong></p>
<p><img src="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/image-20231010225829104.png"></p>
<p><strong>选择3.x , 按下回车</strong></p>
<p><img src="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/image-20231010225920634.png"></p>
<p><strong>按照下图，选择后，按下回车</strong></p>
<p><img src="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/image-20231010230328047.png"></p>
<p><strong>等待项目创建成功</strong></p>
<p><img src="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/image-20231010230429231.png"></p>
<p><strong>项目的基本结构</strong></p>
<p><img src="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/image-20231010231046417.png"></p>
<p><strong>启动项目</strong></p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run serve</span><br></pre></td></tr></table></figure>



<p><strong>项目效果</strong></p>
<p><img src="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/image-20231010231133941.png"></p>
<h2 id="vite方式"><a href="#vite方式" class="headerlink" title="vite方式"></a>vite方式</h2><blockquote>
<p>据说 <a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=vite&spm=1001.2101.3001.7020">vite</a> 没有脚手架，router、vuex、axios、element-plus、eslint等全要自己手动一个个引入，还各种报错的问题.</p>
<p> <a target="_blank" rel="noopener" href="https://blog.csdn.net/bestyinjun/article/details/132063845">参考</a></p>
</blockquote>
<h1 id="api管理"><a href="#api管理" class="headerlink" title="api管理"></a>api管理</h1><p>request/api.ts</p>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// axios实例</span></span><br><span class="line"><span class="keyword">const</span> service = axios.<span class="title function_">create</span>(&#123;</span><br><span class="line">    <span class="attr">baseURL</span>: <span class="string">&quot;http://localhost:8724/&quot;</span>,</span><br><span class="line">    <span class="attr">timeout</span>: <span class="number">5000</span>,</span><br><span class="line">    <span class="attr">headers</span>: &#123;</span><br><span class="line">        <span class="string">&quot;Content-Type&quot;</span>: <span class="string">&quot;application/json;charset=utf-8&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 请求拦截,获取token并保存</span></span><br><span class="line">service.<span class="property">interceptors</span>.<span class="property">request</span>.<span class="title function_">use</span>(<span class="function">(<span class="params">config</span>) =&gt;</span> &#123;</span><br><span class="line">    config.<span class="property">headers</span>.<span class="property">token</span> = config.<span class="property">headers</span>.<span class="property">token</span> || &#123;&#125;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;config&#x27;</span>,config)</span><br><span class="line">    <span class="keyword">if</span> (<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;token&#x27;</span>)) &#123;</span><br><span class="line">        config.<span class="property">headers</span>.<span class="property">token</span> = <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;token&#x27;</span>) || <span class="string">&quot;&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 响应拦截</span></span><br><span class="line">service.<span class="property">interceptors</span>.<span class="property">response</span>.<span class="title function_">use</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> <span class="attr">code</span>: <span class="built_in">number</span> = res.<span class="property">data</span>.<span class="property">code</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;code&#x27;</span>,code)</span><br><span class="line">    <span class="keyword">if</span> (code != <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>(res.<span class="property">data</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;, <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(error);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> service</span><br></pre></td></tr></table></figure>

<h1 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h1><p>/router.ts</p>
<p>此处为静态，后续需要<code>根据系统当前角色配置资源菜单</code></p>
 <figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createRouter, createWebHistory, <span class="title class_">RouteRecordRaw</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">HomeView</span> <span class="keyword">from</span> <span class="string">&#x27;../views/HomeView.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>: <span class="title class_">Array</span>&lt;<span class="title class_">RouteRecordRaw</span>&gt; = [</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;home&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="title class_">HomeView</span>,</span><br><span class="line">    <span class="attr">children</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&quot;/pbill&quot;</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;pbill&#x27;</span>,</span><br><span class="line">        <span class="attr">meta</span>: &#123;</span><br><span class="line">          <span class="attr">isShow</span>: <span class="literal">true</span>,</span><br><span class="line">          <span class="attr">title</span>: <span class="string">&quot;账务管理&quot;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">children</span>: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">path</span>: <span class="string">&quot;/list&quot;</span>,</span><br><span class="line">            <span class="attr">name</span>: <span class="string">&#x27;list&#x27;</span>,</span><br><span class="line">            <span class="attr">meta</span>: &#123;</span><br><span class="line">              <span class="comment">//isShow: true,</span></span><br><span class="line">              <span class="attr">title</span>: <span class="string">&quot;账单列表&quot;</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="string">&#x27;../views/bill/BillListView.vue&#x27;</span>)</span><br><span class="line">          &#125;,</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">path</span>: <span class="string">&quot;/edit&quot;</span>,</span><br><span class="line">            <span class="attr">name</span>: <span class="string">&#x27;edit&#x27;</span>,</span><br><span class="line">            <span class="attr">meta</span>: &#123;</span><br><span class="line">              <span class="comment">//isShow: true,</span></span><br><span class="line">              <span class="attr">title</span>: <span class="string">&quot;账单编辑&quot;</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="string">&#x27;../views/bill/BillEditView.vue&#x27;</span>)</span><br><span class="line">          &#125;,</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">path</span>: <span class="string">&quot;/statistics&quot;</span>,</span><br><span class="line">            <span class="attr">name</span>: <span class="string">&#x27;statistics&#x27;</span>,</span><br><span class="line">            <span class="attr">meta</span>: &#123;</span><br><span class="line">              <span class="comment">//isShow: true,</span></span><br><span class="line">              <span class="attr">title</span>: <span class="string">&quot;账单统计&quot;</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="string">&#x27;../views/bill/BillStatisticsView.vue&#x27;</span>)</span><br><span class="line">          &#125;,</span><br><span class="line">          </span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&quot;/test&quot;</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;test&#x27;</span>,</span><br><span class="line">        <span class="attr">meta</span>: &#123;</span><br><span class="line">          <span class="attr">isShow</span>: <span class="literal">true</span>,</span><br><span class="line">          <span class="attr">title</span>: <span class="string">&quot;测试&quot;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">children</span>: [</span><br><span class="line">          &#123;</span><br><span class="line">            <span class="attr">path</span>: <span class="string">&quot;/goods&quot;</span>,</span><br><span class="line">            <span class="attr">name</span>: <span class="string">&#x27;goods&#x27;</span>,</span><br><span class="line">            <span class="attr">meta</span>: &#123;</span><br><span class="line">              <span class="comment">//isShow: true,</span></span><br><span class="line">              <span class="attr">title</span>: <span class="string">&quot;商品列表&quot;</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="string">&#x27;../views/GoodsView.vue&#x27;</span>)</span><br><span class="line">          &#125;</span><br><span class="line">        ]</span><br><span class="line"></span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/about&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;about&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="string">&#x27;../views/AboutView.vue&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/login&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;login&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="string">&#x27;../views/LoginView.vue&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>(&#123;</span><br><span class="line">  <span class="attr">history</span>: <span class="title function_">createWebHistory</span>(process.<span class="property">env</span>.<span class="property">BASE_URL</span>),</span><br><span class="line">  routes</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router</span><br></pre></td></tr></table></figure>

<h1 id="组件库"><a href="#组件库" class="headerlink" title="组件库"></a>组件库</h1><p>选择 <a target="_blank" rel="noopener" href="https://element-plus.org/zh-CN/guide/installation.html#%E7%89%88%E6%9C%AC">elementui-plus</a> 作为组件库</p>
<p>安装</p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install element-plus --save</span><br></pre></td></tr></table></figure>

<p>检验：package.json 中出现</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;dependencies&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">  ......</span><br><span class="line">  <span class="attr">&quot;element-plus&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^2.3.12&quot;</span><span class="punctuation">,</span></span><br><span class="line">  .....</span><br><span class="line"><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>





<h1 id="模块"><a href="#模块" class="headerlink" title="模块"></a>模块</h1><h2 id="登陆模块"><a href="#登陆模块" class="headerlink" title="登陆模块"></a>登陆模块</h2><p><strong>定义接口</strong></p>
<p>/request/api.ts</p>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 登陆接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">login</span>(<span class="params">data:loginData</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">service</span>(&#123;</span><br><span class="line">        <span class="attr">url</span>:<span class="string">&quot;/hw/login/user/login&quot;</span>,</span><br><span class="line">        <span class="attr">method</span>:<span class="string">&quot;post&quot;</span>,</span><br><span class="line">        data,</span><br><span class="line">        <span class="attr">headers</span>: &#123;</span><br><span class="line">            <span class="string">&quot;token&quot;</span>: <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&quot;token&quot;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>定义路由</strong></p>
<p>/router/index.ts</p>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">... </span><br><span class="line">&#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/login&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;login&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="string">&#x27;../views/LoginView.vue&#x27;</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">...</span><br></pre></td></tr></table></figure>

<p><strong>声明登陆数据类型</strong></p>
<p>type/login.ts</p>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> <span class="title class_">LoginFormInt</span> &#123;</span><br><span class="line">    <span class="attr">username</span>: <span class="built_in">string</span></span><br><span class="line">    <span class="attr">password</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> <span class="title class_">LoginData</span> &#123;</span><br><span class="line">    <span class="attr">ruleForm</span>:<span class="title class_">LoginFormInt</span>=&#123;</span><br><span class="line">        <span class="attr">username</span>:<span class="string">&quot;&quot;</span>,</span><br><span class="line">        <span class="attr">password</span>:<span class="string">&quot;&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p><strong>页面组件</strong></p>
<p>views/LoginView.vue</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;login-box&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">el-form</span> <span class="attr">ref</span>=<span class="string">&quot;ruleFormRef&quot;</span> <span class="attr">:model</span>=<span class="string">&quot;ruleForm&quot;</span> <span class="attr">status-icon</span> <span class="attr">:rules</span>=<span class="string">&quot;rules&quot;</span> <span class="attr">label-width</span>=<span class="string">&quot;80px&quot;</span> <span class="attr">class</span>=<span class="string">&quot;demo-ruleForm&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">h2</span>&gt;</span>后台管理系统<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;账号&quot;</span> <span class="attr">prop</span>=<span class="string">&quot;username&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">&quot;ruleForm.username&quot;</span> <span class="attr">autocomplete</span>=<span class="string">&quot;off&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;密码&quot;</span> <span class="attr">prop</span>=<span class="string">&quot;password&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">&quot;ruleForm.password&quot;</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">autocomplete</span>=<span class="string">&quot;off&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">el-form-item</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">el-button</span> <span class="attr">class</span>=<span class="string">&quot;loginBtn&quot;</span> <span class="attr">type</span>=<span class="string">&quot;primary&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;submitForm(ruleFormRef)&quot;</span>&gt;</span>登陆<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">el-button</span> <span class="attr">class</span>=<span class="string">&quot;loginBtn&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;resetForm(ruleFormRef)&quot;</span>&gt;</span>重置<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">el-form</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; defineComponent, reactive, toRefs, ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; <span class="title class_">LoginData</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;../type/login&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> type &#123; <span class="title class_">FormInstance</span>, <span class="title class_">FormRules</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;element-plus&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; login &#125; <span class="keyword">from</span> <span class="string">&#x27;../request/api&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;useRouter&#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> data = <span class="title function_">reactive</span>(<span class="keyword">new</span> <span class="title class_">LoginData</span>());</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> rules = &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">username</span>: [</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#123; <span class="attr">required</span>: <span class="literal">true</span>, <span class="attr">message</span>: <span class="string">&#x27;请输入账号&#x27;</span>, <span class="attr">trigger</span>: <span class="string">&#x27;blur&#x27;</span> &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#123; <span class="attr">min</span>: <span class="number">3</span>, <span class="attr">max</span>: <span class="number">5</span>, <span class="attr">message</span>: <span class="string">&#x27;Length should be 3 to 5&#x27;</span>, <span class="attr">trigger</span>: <span class="string">&#x27;blur&#x27;</span> &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            ],</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">password</span>: [</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#123; <span class="attr">required</span>: <span class="literal">true</span>, <span class="attr">message</span>: <span class="string">&#x27;请输入密码&#x27;</span>, <span class="attr">trigger</span>: <span class="string">&#x27;blur&#x27;</span> &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#123; <span class="attr">min</span>: <span class="number">3</span>, <span class="attr">max</span>: <span class="number">5</span>, <span class="attr">message</span>: <span class="string">&#x27;Length should be 3 to 5&#x27;</span>, <span class="attr">trigger</span>: <span class="string">&#x27;blur&#x27;</span> &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            ],</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> ruleFormRef = ref&lt;<span class="title class_">FormInstance</span>&gt;()</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> router = <span class="title function_">useRouter</span>() <span class="comment">//相当于vue2 $router</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> <span class="title function_">submitForm</span> = (<span class="params">formEl: FormInstance | <span class="literal">undefined</span></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="keyword">if</span> (!formEl) <span class="keyword">return</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            formEl.<span class="title function_">validate</span>(<span class="function">(<span class="params">valid</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="keyword">if</span> (valid) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;submit!&#x27;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="title function_">login</span>(data.<span class="property">ruleForm</span>).<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;登陆成功-----------&quot;</span>,res.<span class="property">data</span>.<span class="property">data</span>.<span class="property">token</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="comment">//将token保存 并跳转到首页</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;token&#x27;</span>,res.<span class="property">data</span>.<span class="property">data</span>.<span class="property">token</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;准备跳转.......&#x27;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        router.<span class="title function_">push</span>(<span class="string">&#x27;/&#x27;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;).<span class="title function_">catch</span>(<span class="function">(<span class="params">e</span>)=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;异常&#x27;</span>,e)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                        router.<span class="title function_">push</span>(<span class="string">&#x27;/login&#x27;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    &#125;);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    router.<span class="title function_">push</span>(<span class="string">&#x27;/&#x27;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125; <span class="keyword">else</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;error submit!&#x27;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                    <span class="keyword">return</span> <span class="literal">false</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> <span class="title function_">resetForm</span> = (<span class="params">formEl: FormInstance | <span class="literal">undefined</span></span>) =&gt; &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="keyword">if</span> (!formEl) <span class="keyword">return</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            formEl.<span class="title function_">resetFields</span>()</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            ...<span class="title function_">toRefs</span>(data), rules, ruleFormRef, submitForm, resetForm</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lnag</span>=<span class="string">&#x27;scss&#x27;</span> <span class="attr">scoped</span>&gt;</span><span class="language-css"></span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"><span class="selector-class">.login-box</span> &#123;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">width</span>: <span class="number">100%</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">height</span>: <span class="number">100%</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">Background</span>: <span class="built_in">url</span>(<span class="string">&quot;../assets/loginbj.jpg&quot;</span>);</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">padding</span>: <span class="number">1px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">text-align</span>: center;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="selector-class">.demo-ruleForm</span> &#123;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">        <span class="attribute">width</span>: <span class="number">500px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">        <span class="comment">/* height: 200px; */</span></span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">        <span class="attribute">margin</span>: <span class="number">200px</span> auto;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">        <span class="attribute">background-color</span>: white;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">        <span class="attribute">padding</span>: <span class="number">30px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">        <span class="attribute">border-radius</span>: <span class="number">20px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    ;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="selector-class">.loginBtn</span> &#123;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">        <span class="attribute">width</span>: <span class="number">40%</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    ;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="selector-tag">h2</span> &#123;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">        <span class="attribute">margin-bottom</span>: <span class="number">10px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>





<h2 id="商品模块"><a href="#商品模块" class="headerlink" title="商品模块"></a>商品模块</h2><p><strong>定义接口</strong></p>
<p>request/api.ts</p>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 商品列表接口</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">getGoodsList</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">service</span>(&#123;</span><br><span class="line">        <span class="attr">url</span>: <span class="string">&quot;/test/getGoodsList&quot;</span>,</span><br><span class="line">        <span class="attr">method</span>: <span class="string">&quot;get&quot;</span></span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>定义路由</strong></p>
<p>router/index.ts</p>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">path</span>: <span class="string">&quot;/test&quot;</span>,</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;test&#x27;</span>,</span><br><span class="line">  <span class="attr">meta</span>: &#123;</span><br><span class="line">    <span class="attr">isShow</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">title</span>: <span class="string">&quot;测试&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">children</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">path</span>: <span class="string">&quot;/goods&quot;</span>,</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;goods&#x27;</span>,</span><br><span class="line">      <span class="attr">meta</span>: &#123;</span><br><span class="line">        <span class="comment">//isShow: true,</span></span><br><span class="line">        <span class="attr">title</span>: <span class="string">&quot;商品列表&quot;</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: &quot;about&quot; */</span> <span class="string">&#x27;../views/GoodsView.vue&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>声明商品数据类型</strong></p>
<p><code>商品查询的对象</code>的属性类型</p>
<p><code>商品列表对象</code>的属性类型</p>
<p>good/goods.ts</p>
<figure class="highlight tsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 商品列表接口定义</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> <span class="title class_">ListInt</span> &#123;</span><br><span class="line">    <span class="attr">userId</span>: <span class="built_in">number</span></span><br><span class="line">    <span class="attr">id</span>: <span class="built_in">number</span>,</span><br><span class="line">    <span class="attr">title</span>: <span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">introduce</span>: <span class="built_in">string</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 商品列表筛选条件接口定义</span></span><br><span class="line"><span class="keyword">interface</span> selectDataInt&#123;</span><br><span class="line">    <span class="attr">title</span>:<span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">introduce</span>:<span class="built_in">string</span>,</span><br><span class="line">    <span class="attr">page</span>:<span class="built_in">number</span>, <span class="comment">// 页码</span></span><br><span class="line">    <span class="attr">count</span>:<span class="built_in">number</span>, <span class="comment">// 总条数</span></span><br><span class="line">    <span class="attr">pagesize</span>:<span class="built_in">number</span>,<span class="comment">// 默认一页显示几条</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 将上面接口作为下面类的属性</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> <span class="title class_">InitData</span> &#123;</span><br><span class="line">    <span class="attr">selectData</span>:selectDataInt = &#123;</span><br><span class="line">        <span class="attr">title</span>:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">        <span class="attr">introduce</span>:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">        <span class="attr">page</span>:<span class="number">1</span>, <span class="comment">// 页码</span></span><br><span class="line">        <span class="attr">count</span>:<span class="number">0</span>, <span class="comment">// 总条数</span></span><br><span class="line">        <span class="attr">pagesize</span>:<span class="number">5</span>,<span class="comment">// 默认一页显示几条</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attr">list</span>:<span class="title class_">ListInt</span>[] = [] <span class="comment">//展示的内容的数据</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p><strong>页面组件</strong></p>
<p>views/GoodsView.vue</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="comment">&lt;!-- 搜索部分 --&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">el-form</span> <span class="attr">:inline</span>=<span class="string">&quot;true&quot;</span> <span class="attr">:model</span>=<span class="string">&quot;selectData&quot;</span> <span class="attr">class</span>=<span class="string">&quot;demo-form-inline&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;标题&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">&quot;selectData.title&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入关键字&quot;</span> <span class="attr">clearable</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;详情&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">el-input</span> <span class="attr">v-model</span>=<span class="string">&quot;selectData.introduce&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入关键字&quot;</span> <span class="attr">clearable</span>/&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">el-form-item</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">                <span class="tag">&lt;<span class="name">el-button</span> <span class="attr">type</span>=<span class="string">&quot;primary&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;onSubmit&quot;</span>&gt;</span>查询<span class="tag">&lt;/<span class="name">el-button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">el-form</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="comment">&lt;!-- 表格部分 --&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">el-table</span> <span class="attr">:data</span>=<span class="string">&quot;dataList.comList&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width: 100%&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">prop</span>=<span class="string">&quot;userId&quot;</span> <span class="attr">label</span>=<span class="string">&quot;用户id&quot;</span> <span class="attr">width</span>=<span class="string">&quot;180&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">prop</span>=<span class="string">&quot;title&quot;</span> <span class="attr">label</span>=<span class="string">&quot;标题&quot;</span> <span class="attr">width</span>=<span class="string">&quot;180&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">el-table-column</span> <span class="attr">prop</span>=<span class="string">&quot;introduce&quot;</span> <span class="attr">label</span>=<span class="string">&quot;详情&quot;</span> <span class="attr">width</span>=<span class="string">&quot;180&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">el-table</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">el-pagination</span>  @<span class="attr">size-change</span>=<span class="string">&quot;sizeChange&quot;</span>  @<span class="attr">current-change</span>=<span class="string">&quot;currentChange&quot;</span> <span class="attr">layout</span>=<span class="string">&quot;prev, pager, next&quot;</span> <span class="attr">:total</span>=<span class="string">&quot;selectData.count&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">lang</span>=<span class="string">&quot;ts&quot;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; computed,defineComponent, reactive, toRefs, &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; getGoodsList &#125; <span class="keyword">from</span> <span class="string">&#x27;../request/api&#x27;</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123;<span class="title class_">InitData</span>&#125; <span class="keyword">from</span> <span class="string">&#x27;../type/good/goods&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="title function_">getGoodsList</span>().<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;res&quot;</span>, res.<span class="property">data</span>.<span class="property">data</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">// 将解构好的属性对象进行赋值</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            data.<span class="property">list</span> = res.<span class="property">data</span>.<span class="property">data</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="comment">// 分页参数</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            data.<span class="property">selectData</span>.<span class="property">count</span> = res.<span class="property">data</span>.<span class="property">data</span>.<span class="property">length</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 计算属性,当分页事件赋值好后，将data.list按照分页参数进行分割</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> dataList = <span class="title function_">reactive</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">comList</span>:<span class="title function_">computed</span>(<span class="function">()=&gt;</span>&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="keyword">const</span> startIndex = (data.<span class="property">selectData</span>.<span class="property">page</span> - <span class="number">1</span>) * data.<span class="property">selectData</span>.<span class="property">pagesize</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="keyword">const</span> endIndex = data.<span class="property">selectData</span>.<span class="property">page</span> * data.<span class="property">selectData</span>.<span class="property">pagesize</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="keyword">return</span> data.<span class="property">list</span>.<span class="title function_">slice</span>(startIndex, endIndex);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// 分页事件，监听分页插件修改赋值到对象中</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> <span class="title function_">currentChange</span> = (<span class="params">page:number</span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;触发了currentChange&quot;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            data.<span class="property">selectData</span>.<span class="property">page</span> = page</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> <span class="title function_">sizeChange</span> = (<span class="params">size:number</span>)=&gt;&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;触发了sizeChange&quot;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            data.<span class="property">selectData</span>.<span class="property">pagesize</span> = size</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">const</span> data = <span class="title function_">reactive</span>(<span class="keyword">new</span> <span class="title class_">InitData</span>());</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// ...toRefs(data) 将对象解构即对象的属性作为一个对象： </span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="comment">// InitData的selectData与list属性变成对象</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            ...<span class="title function_">toRefs</span>(data), currentChange, sizeChange, dataList</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>





</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">Author: </span><span class="post-copyright-info"><a href="https://gitee.com/CWH6">cwh</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">Link: </span><span class="post-copyright-info"><a href="https://gitee.com/CWH6/2023/10/08/%E3%80%90%E5%AE%9E%E6%88%98%E3%80%91%E5%9F%BA%E4%BA%8EVue3%E6%90%AD%E5%BB%BA%E7%9A%84%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/">https://gitee.com/CWH6/2023/10/08/%E3%80%90%E5%AE%9E%E6%88%98%E3%80%91%E5%9F%BA%E4%BA%8EVue3%E6%90%AD%E5%BB%BA%E7%9A%84%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">Copyright Notice: </span><span class="post-copyright-info">All articles in this blog are licensed under <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> unless stating additionally.</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/bk/tags/Vue/">Vue</a></div><div class="post_share"><div class="social-share" data-image="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/xhs.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/bk/2023/10/10/%E3%80%90%E5%88%86%E5%BA%93%E5%88%86%E8%A1%A8%E3%80%91%E5%88%86%E5%BA%93%E5%88%86%E8%A1%A8%E6%A6%82%E5%BF%B5%E4%B8%8E%E6%93%8D%E4%BD%9C/" title="【分库分表】分库分表概念与操作"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">Previous Post</div><div class="prev_info">【分库分表】分库分表概念与操作</div></div></a></div><div class="next-post pull-right"><a href="/bk/2023/09/28/%E3%80%90%E5%B9%B6%E5%8F%91%E3%80%91%E5%A4%9A%E7%BA%BF%E7%A8%8B-CyclicBarrier%E5%AE%9E%E7%8E%B0%E8%AE%A1%E7%AE%97%E4%BB%BB%E5%8A%A1%E6%8B%86%E8%A7%A3/" title="【并发】多线程+CyclicBarrier实现计算任务拆解"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">Next Post</div><div class="next_info">【并发】多线程+CyclicBarrier实现计算任务拆解</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>Related Articles</span></div><div class="relatedPosts-list"><div><a href="/bk/2023/05/16/%E3%80%90Vue%E3%80%91Vue%E6%A1%86%E6%9E%B6/" title="【Vue】Vue框架"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-05-16</div><div class="title">【Vue】Vue框架</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/xhs.png" onerror="this.onerror=null;this.src='/bk/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">cwh</div><div class="author-info__description">新博客地址：http://cwh6.gitee.io/vuepressv2/</div></div><div class="card-info-data site-data is-center"><a href="/bk/archives/"><div class="headline">Articles</div><div class="length-num">66</div></a><a href="/bk/tags/"><div class="headline">Tags</div><div class="length-num">33</div></a><a href="/bk/categories/"><div class="headline">Categories</div><div class="length-num">8</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="mailto:2747758546@qq.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a><a class="social-icon" href="https://cwh6-bucket.oss-cn-shanghai.aliyuncs.com/bk/wx_self.jpg" target="_blank" title="wx"><i class="fas fa-qq" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>Announcement</span></div><div class="announcement_content">ありがとう、私の暗い世界の小さな太陽、ありがとう、ずっと温めてくれた</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>Catalog</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BC%95%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">引言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%90%AD%E5%BB%BA"><span class="toc-number">2.</span> <span class="toc-text">搭建</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#cli%E6%96%B9%E5%BC%8F"><span class="toc-number">2.1.</span> <span class="toc-text">cli方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vite%E6%96%B9%E5%BC%8F"><span class="toc-number">2.2.</span> <span class="toc-text">vite方式</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#api%E7%AE%A1%E7%90%86"><span class="toc-number">3.</span> <span class="toc-text">api管理</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1"><span class="toc-number">4.</span> <span class="toc-text">路由</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="toc-number">5.</span> <span class="toc-text">组件库</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97"><span class="toc-number">6.</span> <span class="toc-text">模块</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%99%BB%E9%99%86%E6%A8%A1%E5%9D%97"><span class="toc-number">6.1.</span> <span class="toc-text">登陆模块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%95%86%E5%93%81%E6%A8%A1%E5%9D%97"><span class="toc-number">6.2.</span> <span class="toc-text">商品模块</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/bk/2024/02/05/SpringIOC%E7%9A%84%E7%90%86%E8%A7%A3/" title="SpringIOC的理解">SpringIOC的理解</a><time datetime="2024-02-05T14:26:55.000Z" title="Created 2024-02-05 22:26:55">2024-02-05</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/bk/2024/01/18/%E3%80%90ai%E3%80%91chatgpt%E7%BB%95%E5%BC%80%E6%A3%80%E6%9F%A5%E8%BF%87%E6%BB%A4/" title="【ai】chatgpt绕开检查过滤">【ai】chatgpt绕开检查过滤</a><time datetime="2024-01-18T15:55:53.000Z" title="Created 2024-01-18 23:55:53">2024-01-18</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/bk/2024/01/15/%E3%80%90ai%E6%A8%A1%E5%9E%8B%E3%80%91%E5%88%A4%E6%96%AD%E8%AF%AD%E5%8F%A5%E7%9A%84%E7%A7%AF%E6%9E%81%E6%80%A7%E4%B8%8E%E6%B6%88%E6%9E%81%E6%80%A7/" title="【ai模型】判断语句的积极性与消极性">【ai模型】判断语句的积极性与消极性</a><time datetime="2024-01-15T13:10:14.000Z" title="Created 2024-01-15 21:10:14">2024-01-15</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/bk/2023/12/21/%E3%80%90%E5%8C%BA%E5%9D%97%E9%93%BE%E3%80%91%E4%BB%A5%E5%A4%AA%E5%9D%8A%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/" title="【区块链】以太坊智能合约">【区块链】以太坊智能合约</a><time datetime="2023-12-21T13:36:30.000Z" title="Created 2023-12-21 21:36:30">2023-12-21</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/bk/2023/12/21/%E3%80%90Activiti7%E3%80%91%E5%B7%A5%E4%BD%9C%E6%B5%81%E4%BD%BF%E7%94%A8/" title="【Activiti7】工作流使用">【Activiti7】工作流使用</a><time datetime="2023-12-21T13:21:01.000Z" title="Created 2023-12-21 21:21:01">2023-12-21</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By cwh</div><div class="framework-info"><span>Framework </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>Theme </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="Read Mode"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="Switch Between Light And Dark Mode"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="Toggle between single-column and double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="Setting"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="Table Of Contents"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="Back To Top"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/bk/js/utils.js"></script><script src="/bk/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"></div><script id="click-show-text" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-show-text.min.js" data-mobile="false" data-text="offer" data-fontsize="15px" data-random="false" async="async"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>